<ul class="breadcrumb">
  <li>
    <button title="Add Labels" class="btn btn-default"
            ng-disabled="controller.numSelectedClients == 0"
            ng-click="controller.showLabelsDialog('add')"
            name="AddLabels">
      <img src="/static/images/label-add.png" class="toolbar_icon" />
    </button>
    <button title="Remove Labels" class="btn btn-default"
            ng-disabled="controller.numSelectedClients == 0"
            ng-click="controller.showLabelsDialog('remove')"
            name="RemoveLabels">
      <img src="/static/images/label-remove.png" class="toolbar_icon" />
    </button>
  </li>
</ul>

<table class="table table-striped table-condensed table-hover table-bordered full-width">
  <colgroup>
    <col style="width: 40px">
    <col style="width: 40px">
    <col style="width: 13em">
    <col style="width: 13em">
    <col style="width: 20%">
    <col style="width: 10%">
    <col style="width: 20%">
    <col style="width: 15%">
    <col style="width: 15%">
    <col style="width: 8%">
    <col style="width: 15%">
  </colgroup>
  <thead>
    <tr>
      <th><input type="checkbox" class="client-checkbox select-all"
                 grr-disable-if-no-trait="modify_client_labels_action_enabled"
                 ng-model="controller.allClientsSelected"
                 ng-change="controller.selectAll()" />
      </th>
      <th>Online</th>
      <th>Subject</th>
      <th>Host</th>
      <th>OS Version</th>
      <th>MAC</th>
      <th>Usernames</th>
      <th>First Seen</th>
      <th>Client version</th>
      <th>Labels</th>
      <th>Last Checkin</th>
      <th>OS Install Date</th>
    </tr>
  </thead>
  <tbody>
    <tr grr-infinite-table grr-api-items-provider
        query-params="{query: controller.query}"
        url="controller.clientsQueryUrl"
        transform-items="controller.onClientsFetched(items)"
        trigger-update="controller.triggerUpdate"
        ng-click="controller.onClientClick(item)">
      <!-- Selection checkbox -->
      <td>
        <input type="checkbox" class="client-checkbox"
               grr-disable-if-no-trait="modify_client_labels_action_enabled"
               client_id="{$ item.value.client_id.value $}"
               ng-model="controller.selectedClients[item.value.client_id.value]"
               ng-change="controller.updateNumSelectedClients()"
               ng-click="$event.stopPropagation()"
               />
      </td>

      <!-- Online status -->
      <td>
        <grr-client-status-icons client="::item" />
      </td>

      <!-- Subject -->
      <td>
        <span type="subject">{$ ::item.value.client_id.value $}</span>
      </td>

      <!-- Host -->
      <td>
        <grr-semantic-value value="::item.value.os_info.value.fqdn" />
      </td>

      <!-- OS Version -->
      <td>
        <grr-semantic-value value="::item.value.os_info.value.version" />
      </td>

      <!-- MAC -->
      <td>
        <grr-semantic-value value="::item._mac_addresses" />
      </td>

      <!-- Usernames -->
      <td>
        <grr-semantic-value value="::item._usernames" />
      </td>

      <!-- First seen -->
      <td>
        <grr-semantic-value value="::item.value.first_seen_at" />
      </td>

      <!-- Client version -->
      <td>
        <grr-semantic-value value="::item.value.agent_info.value.client_version" />
      </td>

      <!-- Labels -->
      <td>
        <grr-semantic-value value="::item.value.labels" />
      </td>

      <!-- Latest checkin -->
      <td>
        <grr-semantic-value value="::item.value.last_clock" />
      </td>

      <!-- OS install date -->
      <td>
        <grr-semantic-value value="::item.value.os_info.value.install_date" />
      </td>

    </tr>
  </tbody>
</table>
